<?xml version="1.0" encoding="UTF-8"?>
<ui:component xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">

	<ui:composition template="/pages/templates/layout_principal.xhtml">
		<ui:define name="body" width="100%">
			<h:form>
				<h:panelGrid styleClass="titulo">
					<h:outputText styleClass="titulo" value="#{menuControl.nomeProjetoSelecionado} - Lista de casos de uso" />
				</h:panelGrid>
				
				<br />
				
				<h:commandButton value="Novo Caso de Uso" action="#{manterCasosUsoControl.iniciarIncluirCasoUso()}" />
				
				<br />
				<br />
				
				<rich:dataTable id="listaCasoUso" 
					rows="10"
					var="casoUso"
					value="#{manterCasosUsoControl.listCasoUso}"
					rowClasses="odd-row, even-row" 
					styleClass="stable" 
					columnClasses="">
					
					<f:facet name="header">
						<rich:columnGroup>
							<rich:column>Nome</rich:column>
							<rich:column colspan="3">Operações</rich:column>
						</rich:columnGroup>
					</f:facet>
					
					<rich:column>
						#{casoUso.nomeCasoUso}
					</rich:column>
				
					<rich:column style="width: 3%; text-align: center;">
						<h:commandLink action="#{manterCasosUsoControl.iniciarAlterarCasoUso}">
							<f:setPropertyActionListener target="#{manterCasosUsoControl.casoUso}" value="#{casoUso}"/>
							<h:graphicImage library="images" name="pencil.png" title="Editar Caso de Uso" />
						</h:commandLink>
					</rich:column>
					<rich:column style="width: 3%; text-align: center;">
						<h:commandLink action="#{manterCasosUsoControl.excluirCasoUso()}"  onclick="return confirm('Deseja realmente excluir o caso de uso #{casoUso.nomeCasoUso}?')">
							<f:setPropertyActionListener target="#{manterCasosUsoControl.casoUso}" value="#{casoUso}"/>
							<h:graphicImage library="images" name="delete.png" title="Excluir Caso uso" />
						</h:commandLink>
					</rich:column>
					<rich:column style="width: 3%; text-align: center;">
						<h:commandLink action="#{manterCasosUsoControl.obterPercentagemCasoUso()}">
							<f:setPropertyActionListener target="#{manterCasosUsoControl.casoUso}" value="#{casoUso}"/>
							<h:graphicImage library="images" name="contrast_increase.png" title="Percentagem conclusão" />
						</h:commandLink>
					</rich:column>
					
					
						<f:facet name="footer">
							<rich:dataScroller for="listaCasoUso" maxPages="2" limitRender="10"
								fastControls="hide" />
						</f:facet>
				</rich:dataTable>
			</h:form>
			
			<rich:jQuery  selector=".stable tr" event="mouseover" query="jQuery(this).addClass('active-row')" />
			<rich:jQuery selector=".stable tr" event="mouseout" query="jQuery(this).removeClass('active-row')" />
		</ui:define>
		<rich:jQuery selector=".stable tr:odd" query="addClass('odd-row')" />
		<rich:jQuery selector=".stable tr:even" query="addClass('even-row')" />

	</ui:composition>

</ui:component>